<!-- 幻灯片实现 -->
<template>
  <!-- 主容器绝对定位到全屏,阻止鼠标按下事件向父级传递 -->
  <div @mousedown="e=>e.stopPropagation()" style="
    background-color: rgb(4, 13, 38);
    position: fixed;
    right: 0px;
    bottom: 0px;
    top: 60px;
    left: 0px;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1500;">
    <!-- 顶部工具栏 -->
    <div style="
    position: absolute;
    right: 0px;
    top: 0px;
    left: 0px;
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    z-index:1500;
    background-color: rgba(0,0,0,0.5);
    height: 50px;">
      <!-- 缩放 -->
      <div style="margin: 10px;">
        <el-popover placement="top-start" width="200" trigger="click">
          <div style="background-color:#f5f7fa;padding:10px;border-radius:10px;width: 200px;">
            缩放
            <!-- 滑块 -->
            <div style="width: 200px;margin-right: 0px;">
              <el-slider @mousewheel.native="sliderWheelHandle" :max="3" :step="0.1" :format-tooltip="formatTooltip" v-model="slider">
              </el-slider>
            </div>
          </div>
          <el-button slot="reference">缩放{{formatTooltip(slider)}}</el-button>
        </el-popover>
      </div>
      <div style="margin: 10px;">
        <el-button slot="reference" @click="restoration">复位</el-button>
      </div>
      <div style="margin: 10px;">
        <el-button slot="reference" @click="close">关闭</el-button>
      </div>
    </div>
    <transition name="fade" mode="out-in">
    <!-- 图片主体 -->
    <div v-show="imgIsShow" style="transition: all 1s;translate: translateX(30px);">
      <img @load="imageLoaded" @mousedown="imageMousedownHandle" @mousewheel="imageWheelHandle" :src="img.src" :width="img.width" :height="img.height" />
    </div>
    </transition>
    <div @click="previous" style="position: absolute; top: 45%; left: 0px;">
      <i style="color:white;font-size: 80px;" class="el-icon-arrow-left"></i>
    </div>
    <div @click="next" style="position: absolute; top: 45%; right: 0px;">
      <i style="color:white;font-size: 80px;" class="el-icon-arrow-right"></i>
    </div>
    <!-- 标题 -->
    <div style="
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(0,0,0,0.5);
    height: 50px;
    color: white;    text-align: center;
">{{currentSlide+1+'/'+group.length}}<br>{{img.title}}</div>

  </div>
</template>

<style>
</style>

<script>
export default {
  name: 'PreviewSlide',
  data () {
    return {
      imgIsShow: true,
      slider: 1,
      img: {
        src:
          'https://images.pexels.com/photos/207301/pexels-photo-207301.jpeg?h=350&auto=compress&cs=tinysrgb',
        title: '',
        width: NaN,
        height: NaN,
        originalWidth: 0,
        originalHeight: 0,
        div: {},
        obj: {}
      }
    }
  },
  mounted () {
    this.init(this.currentSlide)
  },
  watch: {
    slider () {
      this.setZoom(this.slider)
    },
    currentSlide () {
      this.restoration()
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    // 使用给定的索引初始化
    init (currentSlide) {
      // 当前
      let { imgsrc, title } = this.group[currentSlide]
      let _this = this

      setTimeout(() => { _this.$set(_this.img, 'src', imgsrc) }, 300)
      this.$set(this.img, 'title', title)
    },
    // 图片加载完成的回调
    imageLoaded (imgevent) {
      const { currentTarget: img } = imgevent
      this.$set(this.img, 'div', img.parentElement)
      this.$set(this.img, 'originalWidth', img.naturalWidth)
      this.$set(this.img, 'originalHeight', img.naturalHeight)
      this.$set(this.img, 'obj', img)
      this.sizeInit(img)
      this.imgIsShow = true
    },
    // 图片尺寸初始化
    sizeInit (imgObj) {
      if (this.img.originalHeight > 668) {
        this.slider = 668 / this.img.originalHeight
      } else {
        this.slider = 0.7
      }
      this.setZoom(this.slider)
    },
    // 缩放
    setZoom (multiple) {
      this.$set(this.img, 'width', this.img.originalWidth * multiple)
      this.$set(this.img, 'height', this.img.originalHeight * multiple)
    },
    // 提示格式化
    formatTooltip (val) {
      return Math.round(val * 1.0 * 100) + '%'
    },
    // 缩放滚轮事件操作
    sliderWheelHandle (wheelEvent) {
      if (wheelEvent.deltaY > 0) {
        this.setZoom((this.slider -= 0.1))
      } else if (wheelEvent.deltaY < 0) {
        this.setZoom((this.slider += 0.1))
      }
    },
    // 图片滚轮事件操作
    imageWheelHandle (wheelEvent) {
      if (wheelEvent.deltaY > 0) {
        this.next()
      } else if (wheelEvent.deltaY < 0) {
        this.previous()
      }
    },
    // 移动及缩放复位
    restoration () {
      this.init(this.currentSlide)
      this.img.obj.style.position = 'unset'
      this.sizeInit()
    },
    previous () {
      if (this.currentSlide === 0) {
        this.$message('已经是第一张图片了！')
        return
      }
      this.imgIsShow = false
      this.$emit('update:currentSlide', this.currentSlide - 1)
    },
    next () {
      if (this.currentSlide === (this.group.length - 1)) {
        this.$message('已经是最后一张图片了！')
        return
      }
      this.imgIsShow = false
      this.$emit('update:currentSlide', this.currentSlide + 1)
    },
    // 图片点击事件操作
    imageMousedownHandle (mousedownEvent) {
      // 阻止事件继续传递
      mousedownEvent.stopPropagation()
      // 取得目标元素
      const { currentTarget } = mousedownEvent
      let oDiv = currentTarget // 当前元素
      // let self = this // 上下文
      oDiv.style.position = 'absolute'
      // 鼠标按下，计算当前元素距离可视区的距离
      let disX = mousedownEvent.clientX - oDiv.offsetLeft
      let disY = mousedownEvent.clientY - oDiv.offsetTop

      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        let l = e.clientX - disX
        let t = e.clientY - disY
        // 移动当前元素
        oDiv.style.left = l + 'px'
        oDiv.style.top = t + 'px'
      }
      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  },
  props: { group: { default: [{}] }, currentSlide: { default: 0 } }
}
</script>
